```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 操作艺术 - 现代前端开发指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
        .drop-cap::first-letter {
            font-size: 3.5em;
            float: left;
            line-height: 0.65;
            margin: 0.1em 0.2em 0 0;
            color: #4f46e5;
        }
        .code-block {
            background-color: #2d3748;
            color: #e2e8f0;
            border-radius: 0.5rem;
            overflow-x: auto;
        }
        .code-block pre {
            margin: 0;
            padding: 1rem;
        }
        .interactive-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .interactive-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .btn-primary {
            background-color: #4f46e5;
            color: white;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #4338ca;
            transform: translateY(-2px);
        }
        .mermaid {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .example-container {
            border-left: 4px solid #4f46e5;
            background-color: #f8fafc;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">DOM 操作的艺术</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">掌握 JavaScript 操作网页元素的精髓，打造动态交互体验</p>
            <div class="flex justify-center space-x-4">
                <a href="#dom-intro" class="btn-primary px-6 py-3 rounded-lg font-medium inline-flex items-center">
                    开始学习 <i class="fas fa-arrow-down ml-2"></i>
                </a>
                <a href="#examples" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium inline-flex items-center">
                    查看示例 <i class="fas fa-code ml-2"></i>
                </a>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-6xl px-4 md:px-0 py-12">
        <!-- DOM Introduction -->
        <section id="dom-intro" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-indigo-500 flex-1"></div>
                <h2 class="text-3xl font-bold px-4">DOM 基础</h2>
                <div class="h-1 bg-indigo-500 flex-1"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <div>
                    <p class="text-lg drop-cap">这是我们最重要需要掌握的技能，就是采用DOM的方式来操作网页的元素。</p>
                    <p class="text-lg mt-4"><strong>通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。</strong></p>
                    
                    <div class="bg-white p-6 rounded-xl shadow-md mt-6">
                        <h3 class="text-xl font-bold text-indigo-700 mb-4">HTML DOM (文档对象模型)</h3>
                        <p>当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。</p>
                        <p class="mt-2">HTML DOM 模型被构造为对象的树。</p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">HTML DOM 树</h3>
                    </div>
                    <div class="p-4">
                        <img src="https://cdn.nlark.com/yuque/0/2023/gif/21449790/1692787338251-8cd184d3-70d3-4593-9916-8e0c3a0f8732.gif" alt="DOM树结构" class="w-full rounded">
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
                <h3 class="text-xl font-bold text-indigo-700 mb-4">DOM 的强大能力</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                            <i class="fas fa-code"></i>
                        </div>
                        <p>JavaScript 能够改变页面中的所有 HTML 元素</p>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                            <i class="fas fa-tag"></i>
                        </div>
                        <p>JavaScript 能够改变页面中的所有 HTML 属性</p>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <p>JavaScript 能够改变页面中的所有 CSS 样式</p>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                            <i class="fas fa-mouse"></i>
                        </div>
                        <p>JavaScript 能够对页面中的所有事件做出反应</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Finding Elements -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-indigo-500 flex-1"></div>
                <h2 class="text-3xl font-bold px-4">查找元素</h2>
                <div class="h-1 bg-indigo-500 flex-1"></div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md mb-8">
                <p class="text-lg">通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：</p>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                    <div class="interactive-card p-4 rounded-lg border border-gray-200">
                        <div class="text-indigo-600 text-2xl mb-2">
                            <i class="fas fa-id-card"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">通过 id 查找</h3>
                        <p>使用 <code class="bg-gray-100 px-1 rounded">document.getElementById()</code></p>
                    </div>
                    <div class="interactive-card p-4 rounded-lg border border-gray-200">
                        <div class="text-indigo-600 text-2xl mb-2">
                            <i class="fas fa-tags"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">通过标签名查找</h3>
                        <p>使用 <code class="bg-gray-100 px-1 rounded">getElementsByTagName()</code></p>
                    </div>
                    <div class="interactive-card p-4 rounded-lg border border-gray-200">
                        <div class="text-indigo-600 text-2xl mb-2">
                            <i class="fas fa-object-group"></i>
                        </div>
                        <h3 class="font-bold text-lg mb-2">通过类名查找</h3>
                        <p>使用 <code class="bg-gray-100 px-1 rounded">getElementsByClassName()</code></p>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- By ID -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">通过 id 查找 HTML 元素</h3>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。</p>
                        <div class="code-block rounded-lg">
                            <pre><code class="language-javascript">var x = document.getElementById("intro");</code></pre>
                        </div>
                        <p class="mt-4 text-gray-600">如果找到该元素，则该方法将以对象(在 x 中)的形式返回该元素。如果未找到该元素，则 x 将包含 null。</p>
                    </div>
                </div>
                
                <!-- By Tag Name -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">通过标签名查找 HTML 元素</h3>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">本例查找 id="main" 的元素，然后查找 "main" 中的所有 &lt;p&gt; 元素：</p>
                        <div class="code-block rounded-lg">
                            <pre><code class="language-javascript">var x = document.getElementById("main");
var y = x.getElementsByTagName("p");</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- DOM Manipulation -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-indigo-500 flex-1"></div>
                <h2 class="text-3xl font-bold px-4">DOM 操作</h2>
                <div class="h-1 bg-indigo-500 flex-1"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <!-- Change HTML Content -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">改变 HTML 内容</h3>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">修改 HTML 内容的最简单的方法时使用 innerHTML 属性。</p>
                        <div class="code-block rounded-lg">
                            <pre><code class="language-javascript">document.getElementById(id).innerHTML = new HTML</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- Change HTML Attributes -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">改变 HTML 属性值</h3>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">如需改变 HTML 元素的属性，请使用这个语法：</p>
                        <div class="code-block rounded-lg">
                            <pre><code class="language-javascript">document.getElementById(id).attribute = new value</code></pre>
                        </div>
                        <div class="mt-4 example-container p-4 rounded">
                            <p class="font-bold mb-2">示例：</p>
                            <p>本例改变了 &lt;img&gt; 元素的 src 属性：</p>
                            <div class="code-block rounded-lg mt-2">
                                <pre><code class="language-javascript">document.getElementById("image").src = "landscape.jpg";</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Change CSS -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card mb-12">
                <div class="p-4 bg-indigo-600 text-white">
                    <h3 class="text-xl font-bold">改变 HTML 样式</h3>
                </div>
                <div class="p-6">
                    <p class="mb-4">如需改变 HTML 元素的样式，请使用这个语法：</p>
                    <div class="code-block rounded-lg">
                        <pre><code class="language-javascript">document.getElementById(id).style.property = new style</code></pre>
                    </div>
                    <div class="mt-6">
                        <p class="font-bold mb-2">比如控制内容的显示和隐藏：</p>
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787338595-39db0b6c-1db4-489c-b98c-8483a0120185.png" alt="控制显示隐藏" class="w-full rounded border border-gray-200">
                    </div>
                </div>
            </div>
        </section>
        
        <!-- DOM Events -->
        <section id="examples" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-indigo-500 flex-1"></div>
                <h2 class="text-3xl font-bold px-4">DOM 事件</h2>
                <div class="h-1 bg-indigo-500 flex-1"></div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md mb-8">
                <p class="text-lg mb-4">我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。</p>
                <p class="mb-6">如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：</p>
                <div class="code-block rounded-lg inline-block">
                    <pre><code class="language-javascript">onclick = JavaScript</code></pre>
                </div>
                
                <div class="mt-8">
                    <h3 class="text-xl font-bold text-indigo-700 mb-4">HTML 事件的例子：</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <div class="flex items-center">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-mouse-pointer"></i>
                            </div>
                            <p>当用户点击鼠标时</p>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-globe"></i>
                            </div>
                            <p>当网页已加载时</p>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-arrows-alt"></i>
                            </div>
                            <p>当鼠标移动到元素上时</p>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-keyboard"></i>
                            </div>
                            <p>当输入字段被改变时</p>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-indigo-100 text-indigo-600 p-2 rounded-full mr-3">
                                <i class="fas fa-paper-plane"></i>
                            </div>
                            <p>当提交 HTML 表单时</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <!-- Click Event -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">单击事件</h3>
                    </div>
                    <div class="p-6">
                        <p class="mb-4">点击之后，更改标题内容。this代表当前被点击的对象。</p>
                        <div class="flex flex-col space-y-4">
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787338833-b7c057ee-41dc-42c0-a86a-bb11ab662f19.png" alt="点击事件示例1" class="rounded border border-gray-200">
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787339072-9429e38f-56f5-4d99-bf9b-c02897d5015e.png" alt="点击事件示例2" class="rounded border border-gray-200">
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787339309-822768ca-4c63-4bce-9d04-82ff3b7cbc1e.png" alt="点击事件示例3" class="rounded border border-gray-200">
                        </div>
                    </div>
                </div>
                
                <!-- Other Events -->
                <div>
                    <!-- Onload Event -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card mb-6">
                        <div class="p-4 bg-indigo-600 text-white">
                            <h3 class="text-xl font-bold">onload 事件</h3>
                        </div>
                        <div class="p-6">
                            <p>onload 一般可以来做一些网页的环境准备工作</p>
                        </div>
                    </div>
                    
                    <!-- Keyboard Event -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card mb-6">
                        <div class="p-4 bg-indigo-600 text-white">
                            <h3 class="text-xl font-bold">键盘事件</h3>
                        </div>
                        <div class="p-6">
                            <p>案例，设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数。</p>
                        </div>
                    </div>
                    
                    <!-- Mouse Move Event -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card mb-6">
                        <div class="p-4 bg-indigo-600 text-white">
                            <h3 class="text-xl font-bold">鼠标移动事件</h3>
                        </div>
                        <div class="p-6">
                            <p>案例，实现一个抓迷藏的小游戏</p>
                        </div>
                    </div>
                    
                    <!-- Focus Event -->
                    <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                        <div class="p-4 bg-indigo-600 text-white">
                            <h3 class="text-xl font-bold">焦点事件 onfocus/onblur</h3>
                        </div>
                        <div class="p-6">
                            <p>写一个注册邮箱的文本框，默认显示"请输入邮箱地址"，光标定位到之后，自动将里面的信息清除掉</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- DOM Nodes -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-indigo-500 flex-1"></div>
                <h2 class="text-3xl font-bold px-4">DOM 节点操作</h2>
                <div class="h-1 bg-indigo-500 flex-1"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Add Nodes -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">添加节点</h3>
                    </div>
                    <div class="p-6">
                        <h4 class="font-bold text-lg mb-2">创建新的 HTML 元素</h4>
                        <p class="mb-4">如需向 HTML DOM 添加新元素，您必须首先创建该元素(元素节点)，然后向一个已存在的元素追加该元素。</p>
                        <div class="flex flex-col space-y-4">
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787339549-732d7bcc-c6cd-4a86-8a12-1e5608fe42c9.png" alt="添加节点示例1" class="rounded border border-gray-200">
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787339825-afb2b488-9ab9-43dc-af6c-32dc65029d13.png" alt="添加节点示例2" class="rounded border border-gray-200">
                        </div>
                    </div>
                </div>
                
                <!-- Remove Nodes -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-red-600 text-white">
                        <h3 class="text-xl font-bold">删除节点</h3>
                    </div>
                    <div class="p-6">
                        <p class="mb-4 font-bold">如需删除 HTML 元素，您必须首先获得该元素的父元素：</p>
                        <div class="example-container p-4 rounded">
                            <div class="code-block rounded-lg">
                                <pre><code class="language-html">&lt;div id="div1"&gt;
  &lt;p id="p1"&gt;这是一个段落。&lt;/p&gt;
  &lt;p id="p2"&gt;这是另一个段落。&lt;/p&gt;
&lt;/div&gt;</code></pre>
                            </div>
                            <div class="code-block rounded-lg mt-4">
                                <pre><code class="language-javascript">var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Practical Examples -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-indigo-500 flex-1"></div>
                <h2 class="text-3xl font-bold px-4">实战案例</h2>
                <div class="h-1 bg-indigo-500 flex-1"></div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Calculator -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">计算器</h3>
                    </div>
                    <div class="p-6">
                        <p>实现加减乘除的计算</p>
                        <div class="mt-4 flex justify-center">
                            <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-2.5 py-0.5 rounded">实战练习</span>
                        </div>
                    </div>
                </div>
                
                <!-- Cascading Dropdown -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">级联下拉列表</h3>
                    </div>
                    <div class="p-6">
                        <p>首先编写两个下拉列表，获取其中一个下拉列表并为其绑定onchange事件</p>
                        <div class="mt-4 flex justify-center">
                            <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-2.5 py-0.5 rounded">实战练习</span>
                        </div>
                    </div>
                </div>
                
                <!-- Form Validation -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden interactive-card">
                    <div class="p-4 bg-indigo-600 text-white">
                        <h3 class="text-xl font-bold">表单验证</h3>
                    </div>
                    <div class="p-6">
                        <ul class="list-disc pl-5 space-y-1">
                            <li>用户名不能为空</li>
                            <li>密码和确认密码是否一致</li>
                            <li>表单的提交事件</li>
                        </ul>
                        <div class="mt-4 flex justify-center">
                            <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-2.5 py-0.5 rounded">实战练习</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- DOM Tree Visualization -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-indigo-500 flex-1"></div>
                <h2 class="text-3xl font-bold px-4">DOM 树可视化</h2>
                <div class="h-1 bg-indigo-500 flex-1"></div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="mermaid">
                    graph TD
                        A[Document] --> B[html]
                        B --> C[head]
                        B --> D[body]
                        C --> E[title]
                        C --> F[meta]
                        D --> G[div#header]
                        D --> H[div#content]
                        D --> I[div#footer]
                        G --> J[h1]
                        G --> K[nav]
                        H --> L[article]
                        H --> M[aside]
                        L --> N[section]
                        L --> O[section]
                        K --> P[a]
                        K --> Q[a]
                </div>
            </div>
        </section>
    </div>
    
    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto max-w-6xl px-4 md:px-0 text-center">
            <div class="mb-4">
                <h3 class="text-xl font-bold text-white">技术小馆</h3>
            </div>
            <div>
                <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition-colors" target="_blank">http://www.yuque.com/jtostring</a>
            </div>
        </div>
    </footer>
    
    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Add some interactive examples
        document.addEventListener('DOMContentLoaded', function() {
            // Click event example for hero buttons
            const heroButtons = document.querySelectorAll('.btn-primary, .bg-white');
            heroButtons.forEach(button => {
                button.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-2px)';
                });
                button.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>
</body>
</html>
```